@import "../../variables.scss";

@mixin setCheckBox($name, $hoverTextColor) {
    .sc-#{$name} {
        height: 22px;
        display: flex;
        align-items: center;

        .el-checkbox__input {

            .el-checkbox__inner,
            .el-checkbox__inner:hover,
            .el-checkbox__inner:focus,
            &.is-focus .el-checkbox__inner {
                width: 12px;
                height: 12px;
                margin-top: 2px;
                border-radius: 3px;
                box-sizing: border-box;
                border: 1px solid #60626e;
                background: transparent;

                &::after {
                    top: -1px;
                    left: 3px;
                }
            }
        }

        .el-checkbox__label {
            font-size: 12px;
            line-height: 12px;
            color: $textInfo;
            padding-left: 6px;
        }

        &.is-checked {
            .el-checkbox__input {

                .el-checkbox__inner,
                .el-checkbox__inner:hover {
                    width: 12px;
                    height: 12px;
                    border-radius: 3px;
                    border: 1px solid $greenLight;
                    background: $greenLight;
                }
            }

            .el-checkbox__label {
                color: $hoverTextColor;
            }
        }

        .radius {
            border-radius: 100%;
        }

        //在flex中 checkbox 会导致层级失效
        &.sc-checkbox-flex {
            width: 100%;
            display: flex;

            .el-checkbox__label {
                flex: 1;
                overflow: hidden;
            }
        }
    }
}

@include setCheckBox("checkbox", $greenLight);
@include setCheckBox("checkbox-minor", $textInfo);